<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="更新定时任务">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="任务名称"  prop="name">
              <el-input v-model="form.name" name="name">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="任务别名"  prop="aliasName">
              <el-input v-model="form.aliasName" name="aliasName">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="记录类型"  prop="recordType">
              <el-input v-model="form.recordType" name="recordType">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="请求类型"   prop="requestMethod">
              <el-radio-group v-model="form.requestMethod" >
                <el-radio-button label="GET">GET</el-radio-button>
                <el-radio-button label="POST">POST</el-radio-button>
                <el-radio-button label="PUT">PUT</el-radio-button>
                <el-radio-button label="DELETE">DELETE</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="cron表达式"  prop="cronExpression">
              <sc-cron v-model="form.cronExpression" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></sc-cron>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="是否异步"  prop="isSync">
              <el-input v-model="form.isSync" name="isSync">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="请求Body类型"  prop="contentType">
              <el-radio-group v-model="form.contentType" >
                <el-radio-button label="application/json">JSON</el-radio-button>
                <el-radio-button label="application/x-www-form-urlencoded">Form</el-radio-button>
                <el-radio-button label="multipart/form-data">FormData</el-radio-button>
                <el-radio-button label="application/xml">XML</el-radio-button>
                <el-radio-button label="text/plain">Text</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务url"  prop="url">
              <el-input v-model="form.url" name="url">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="请求头"  prop="requestHeader">
              <div class="postman-style-editor">
                <div class="postman-editor-header collapsible" @click="toggleHeaderCollapse">
                  <div class="header-actions">
                    <span>请求头</span>
                    <div class="action-buttons">
                      <el-button  circle title="插入常用" @click.stop="addCommonHeaders">
                        <el-icon><Plus /></el-icon>
                      </el-button>
                      <el-icon class="collapse-icon">
                        <component :is="isHeaderCollapsed ? 'ArrowDown' : 'ArrowUp'" />
                      </el-icon>
                    </div>
                  </div>
                </div>
                <div v-show="!isHeaderCollapsed">
                  <div class="postman-tabs">
                    <div 
                      :class="['tab', activeHeaderTab === 'form' ? 'active' : '']" 
                      @click="activeHeaderTab = 'form'">表格</div>
                    <div 
                      :class="['tab', activeHeaderTab === 'text' ? 'active' : '']"
                      @click="activeHeaderTab = 'text'">文本</div>
                  </div>
                  <div class="postman-editor-body form-mode" v-if="activeHeaderTab === 'form'">
                    <div class="key-value-table">
                      <div class="kv-header">
                        <div class="kv-key">KEY</div>
                        <div class="kv-value">VALUE</div>
                        <div class="kv-actions"></div>
                      </div>
                      <div v-for="(header, index) in headerParams" :key="index" class="kv-row">
                        <input 
                          type="text" 
                          class="kv-key-input" 
                          placeholder="键" 
                          v-model="header.key"
                          @input="updateHeadersText"
                        >
                        <input 
                          type="text" 
                          class="kv-value-input" 
                          placeholder="值" 
                          v-model="header.value"
                          @input="updateHeadersText"
                        >
                        <div class="kv-actions">
                          <el-icon class="delete-icon" @click="removeHeaderParam(index)"><Delete /></el-icon>
                        </div>
                      </div>
                      <div class="kv-add-row">
                        <el-button class="add-param-btn" type="button" @click="addHeaderParam">
                          <el-icon><Plus /></el-icon> 添加请求头
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <div class="postman-editor-body" v-else>
                    <el-input
                      v-model="form.requestHeader"
                      type="textarea"
                      :rows="6"
                      placeholder="请输入请求头，格式为JSON对象，例如：{'Content-Type': 'application/json'}"
                      @input="parseHeadersToParams"
                    ></el-input>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求Body" prop="requestBody">
              <div v-if="form.contentType === 'application/json'" class="postman-style-editor">
                <div class="postman-editor-header collapsible" @click="toggleBodyCollapse">
                  <div class="header-actions">
                    <span>请求体</span>
                    <div class="action-buttons">
                      <el-button   circle title="格式化" @click.stop="formatJSON">
                        <el-icon><RefreshRight /></el-icon>
                      </el-button>
                      <el-button  circle title="插入示例" @click.stop="addSampleJSON">
                        <el-icon><Plus /></el-icon>
                      </el-button>
                      <el-icon class="collapse-icon">
                        <component :is="isBodyCollapsed ? 'ArrowDown' : 'ArrowUp'" />
                      </el-icon>
                    </div>
                  </div>
                </div>
                <div v-show="!isBodyCollapsed">
                  <div class="postman-tabs">
                    <div 
                      :class="['tab', activeJsonTab === 'json' ? 'active' : '']" 
                      @click="activeJsonTab = 'json'">JSON</div>
                    <div 
                      :class="['tab', activeJsonTab === 'preview' ? 'active' : '']"
                      @click="activeJsonTab = 'preview'">预览</div>
                    <div 
                      :class="['tab', activeJsonTab === 'text' ? 'active' : '']"
                      @click="activeJsonTab = 'text'">文本</div>
                  </div>
                  <div class="postman-editor-body" v-if="activeJsonTab === 'json'">
                    <div ref="lineNumbers" class="line-numbers"></div>
                    <textarea
                      ref="jsonTextarea"
                      v-model="form.requestBody"
                      class="json-textarea"
                      spellcheck="false"
                      placeholder="{&#10;  // 在此输入JSON格式的请求体&#10;}"
                    ></textarea>
                  </div>
                  <div class="postman-editor-body" v-else-if="activeJsonTab === 'preview'">
                    <div class="json-preview">
                      <pre v-if="jsonValid" v-html="formatJsonForPreview(form.requestBody)"></pre>
                      <div v-else class="preview-error">
                        <el-icon><Warning /></el-icon>
                        <span>无效的JSON格式，无法显示预览</span>
                      </div>
                    </div>
                  </div>
                  <div class="postman-editor-body" v-else>
                    <el-input
                      v-model="form.requestBody"
                      type="textarea"
                      :rows="10"
                      placeholder="请输入文本内容"
                    ></el-input>
                  </div>
                  <div class="postman-status-bar">
                    <div class="status-message" v-if="jsonValid">
                      <el-icon><SuccessFilled /></el-icon> JSON格式有效
                    </div>
                    <div class="status-message error" v-else-if="jsonValidated">
                      <el-icon><CircleCloseFilled /></el-icon> JSON格式无效
                    </div>
                  </div>
                </div>
              </div>
              <div v-else-if="form.contentType === 'application/x-www-form-urlencoded'" class="postman-style-editor">
                <div class="postman-editor-header collapsible" @click="toggleBodyCollapse">
                  <div class="header-actions">
                    <span>请求体</span>
                    <div class="action-buttons">
                      <el-icon class="collapse-icon">
                        <component :is="isBodyCollapsed ? 'ArrowDown' : 'ArrowUp'" />
                      </el-icon>
                    </div>
                  </div>
                </div>
                <div v-show="!isBodyCollapsed">
                  <div class="postman-tabs">
                    <div 
                      :class="['tab', activeFormTab === 'form' ? 'active' : '']" 
                      @click="activeFormTab = 'form'">表单数据</div>
                    <div 
                      :class="['tab', activeFormTab === 'text' ? 'active' : '']"
                      @click="activeFormTab = 'text'">文本</div>
                  </div>
                  <div class="postman-editor-body form-mode" v-if="activeFormTab === 'form'">
                    <div class="key-value-table">
                      <div class="kv-header">
                        <div class="kv-key">KEY</div>
                        <div class="kv-value">VALUE</div>
                        <div class="kv-actions"></div>
                      </div>
                      <div v-for="(param, index) in formParams" :key="index" class="kv-row">
                        <input 
                          type="text" 
                          class="kv-key-input" 
                          placeholder="键" 
                          v-model="param.key"
                          @input="updateFormBody"
                        >
                        <input 
                          type="text" 
                          class="kv-value-input" 
                          placeholder="值" 
                          v-model="param.value"
                          @input="updateFormBody"
                        >
                        <div class="kv-actions">
                          <el-icon class="delete-icon" @click="removeFormParam(index)"><Delete /></el-icon>
                        </div>
                      </div>
                      <div class="kv-add-row">
                        <el-button class="add-param-btn" type="button" @click="addFormParam">
                          <el-icon><Plus /></el-icon> 添加参数
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <div class="postman-editor-body" v-else>
                    <el-input
                      v-model="form.requestBody"
                      type="textarea"
                      :rows="10"
                      placeholder="请输入x-www-form-urlencoded格式的数据，例如：key1=value1&key2=value2"
                      @input="parseFormBodyToParams"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div v-else class="postman-style-editor">
                <div class="postman-editor-header collapsible" @click="toggleBodyCollapse">
                  <div class="header-actions">
                    <span>请求体</span>
                    <div class="action-buttons">
                      <el-icon class="collapse-icon">
                        <component :is="isBodyCollapsed ? 'ArrowDown' : 'ArrowUp'" />
                      </el-icon>
                    </div>
                  </div>
                </div>
                <div v-show="!isBodyCollapsed">
                  <div class="postman-tabs">
                    <div class="tab active">{{ getContentTypeLabel(form.contentType) }}</div>
                  </div>
                  <div class="postman-editor-body">
                    <el-input
                      v-model="form.requestBody"
                      type="textarea"
                      :rows="6"
                      :placeholder="`请输入${getContentTypeLabel(form.contentType)}格式的请求Body`"
                    ></el-input>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务备注"  prop="remark">
              <el-input v-model="form.remark" name="remark" type="textarea"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="任务内容"  prop="content">
              <el-input v-model="form.content" name="content" type="textarea"></el-input>
            </el-form-item>

          </el-col>

          <el-col :span="22">
            <el-form-item>
              <el-button @click="goBack">取消</el-button>
              <el-button type="primary" @click="updateData">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    
    <ApiDebugger 
      ref="apiDebugger"
      :requestUrl="form.url"
      :requestType="form.requestMethod"
      :contentType="form.contentType"
      :requestHeaders="JSON.parse(form.requestHeader || '{}')"
      :requestBody="form.requestBody"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import common from "@/mixins/common.js";
import scCron from "@/components/scCron/index.vue";
import ApiDebugger from './components/ApiDebugger.vue';
import { 
  Plus, 
  RefreshRight, 
  ArrowDown, 
  ArrowUp,
  Delete,
  Warning,
  SuccessFilled,
  CircleCloseFilled
} from '@element-plus/icons-vue';
import http from '@/utils/request';

const route = useRoute();
const router = useRouter();
const goBack = () => {
  router.go(-1);
};

// refs
const ruleForm = ref(null);
const jsonTextarea = ref(null);
const lineNumbers = ref(null);

// 表单数据
const form = reactive({
  name: '',
  aliasName: '',
  recordType: '',
  cronExpression: '',
  isSync: '',
  url: '',
  remark: '',
  content: '',
  requestMethod: 'GET',
  contentType: 'application/json',
  requestBody: '',
  requestHeader: '{}'
});

// 数据和状态
const shortcuts = ref([
  {
    text: "每天8点和12点 (自定义追加)",
    value: "0 0 8,12 * * ?"
  }
]);

const rules = {
  name: [
    {required: true, message: '请输入任务名称', trigger: 'blur'}
  ],
  cronExpression: [
    {required: true, message: '请输入cron表达式', trigger: 'blur'}
  ],
  url: [
    {required: true, message: '请输入任务url', trigger: 'blur'}
  ],
};

const jsonValid = ref(true);
const jsonValidated = ref(false);
const activeJsonTab = ref('json');
const activeFormTab = ref('form');
const activeHeaderTab = ref('form');
const formParams = ref([{ key: '', value: '' }]);
const headerParams = ref([{ key: '', value: '' }]);
const isHeaderCollapsed = ref(false);
const isBodyCollapsed = ref(false);

// 方法
const updateData = async () => {
  try {
    const valid = await ruleForm.value.validate();
    if (!valid) {
      return;
    }
    await updateDataPost();
  } catch (e) {
    return;
  }
};

const updateDataPost = async () => {
  const res = await http.post("/schedulingTask/update", form);
  if (res.code !== 200) {
    ElMessage.error(res.msg);
    return;
  }
  ElMessage({
    message: '更新数据成功',
    type: 'success'
  });
  router.go(-1);
};

const formatJSON = () => {
  try {
    const parsedJSON = JSON.parse(form.requestBody);
    form.requestBody = JSON.stringify(parsedJSON, null, 2);
    nextTick(() => {
      updateLineNumbers();
    });
    jsonValid.value = true;
    jsonValidated.value = true;
    ElMessage({
      message: 'JSON格式化成功',
      type: 'success'
    });
  } catch (error) {
    jsonValid.value = false;
    jsonValidated.value = true;
    ElMessage.error('JSON格式不正确，请检查');
  }
};

const addSampleJSON = () => {
  const sampleJSON = {
    "items": [
      {
        "discount": 1,
        "unitPrice": 50,
        "quantity": 1,
        "colorCode": "007",
        "sizeCode": "01",
        "productCode": "040000200115"
      },
      {
        "discount": 1,
        "unitPrice": 50,
        "quantity": 1,
        "colorCode": "007",
        "sizeCode": "02",
        "productCode": "040000200115"
      }
    ]
  };
  form.requestBody = JSON.stringify(sampleJSON, null, 2);
  nextTick(() => {
    updateLineNumbers();
  });
};

const validateJSON = () => {
  try {
    if (!form.requestBody.trim()) {
      jsonValidated.value = false;
      return true;
    }
    JSON.parse(form.requestBody);
    jsonValid.value = true;
    jsonValidated.value = true;
    return true;
  } catch (error) {
    jsonValid.value = false;
    jsonValidated.value = true;
    return false;
  }
};

const getContentTypeLabel = (contentType) => {
  switch(contentType) {
    case 'application/json': return 'JSON';
    case 'application/x-www-form-urlencoded': return '表单数据';
    case 'multipart/form-data': return '表单数据';
    case 'application/xml': return 'XML';
    case 'text/plain': return '文本';
    default: return contentType;
  }
};

const setupJsonEditor = () => {
  const textarea = jsonTextarea.value;
  const lNumbers = lineNumbers.value;
  
  if (!textarea || !lNumbers) return;
  
  // 初始更新行号
  updateLineNumbers();
  
  // 监听输入更新行号
  textarea.addEventListener('input', () => {
    updateLineNumbers();
    validateJSON();
  });
  textarea.addEventListener('scroll', syncScroll);
  
  // 支持Tab键
  textarea.addEventListener('keydown', handleTab);
  
  // 初始验证
  validateJSON();
};

const updateLineNumbers = () => {
  if (!jsonTextarea.value || !lineNumbers.value) return;
  
  const textarea = jsonTextarea.value;
  const lNumbers = lineNumbers.value;
  
  // 计算行数
  const text = textarea.value || '';
  const lines = text.split('\n');
  const lineCount = lines.length;
  
  // 生成行号HTML
  let html = '';
  for (let i = 1; i <= lineCount; i++) {
    html += `<div class="line-number">${i}</div>`;
  }
  
  // 更新行号容器
  lNumbers.innerHTML = html;
};

const syncScroll = () => {
  if (!jsonTextarea.value || !lineNumbers.value) return;
  
  const textarea = jsonTextarea.value;
  const lNumbers = lineNumbers.value;
  
  // 同步滚动位置
  lNumbers.scrollTop = textarea.scrollTop;
};

const handleTab = (e) => {
  if (!jsonTextarea.value || e.key !== 'Tab') return;
  
  e.preventDefault();
  const textarea = jsonTextarea.value;
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  
  // 插入两个空格
  textarea.value = textarea.value.substring(0, start) + '  ' + textarea.value.substring(end);
  
  // 更新光标位置
  textarea.selectionStart = textarea.selectionEnd = start + 2;
  
  // 手动触发输入事件
  form.requestBody = textarea.value;
  updateLineNumbers();
};

const formatJsonForPreview = (jsonStr) => {
  try {
    if (!jsonStr.trim()) return '';
    
    const parsed = JSON.parse(jsonStr);
    const formatted = JSON.stringify(parsed, null, 2);
    
    // 语法高亮处理
    return formatted
      .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, 
        match => {
          let cls = 'json-number';
          if (/^"/.test(match)) {
            if (/:$/.test(match)) {
              cls = 'json-key';
            } else {
              cls = 'json-string';
            }
          } else if (/true|false/.test(match)) {
            cls = 'json-boolean';
          } else if (/null/.test(match)) {
            cls = 'json-null';
          }
          return `<span class="${cls}">${match}</span>`;
        });
  } catch (e) {
    return '';
  }
};

const addFormParam = () => {
  formParams.value.push({ key: '', value: '' });
};

const removeFormParam = (index) => {
  formParams.value.splice(index, 1);
  // 至少保留一行
  if (formParams.value.length === 0) {
    formParams.value.push({ key: '', value: '' });
  }
  updateFormBody();
};

const updateFormBody = () => {
  // 将键值对转换成表单格式字符串
  const formBodyParts = formParams.value
    .filter(param => param.key.trim())
    .map(param => `${encodeURIComponent(param.key)}=${encodeURIComponent(param.value || '')}`);
  
  form.requestBody = formBodyParts.join('&');
};

const parseFormBodyToParams = () => {
  if (!form.requestBody) {
    formParams.value = [{ key: '', value: '' }];
    return;
  }
  
  try {
    // 将表单字符串解析为键值对数组
    const params = form.requestBody.split('&')
      .filter(part => part.trim())
      .map(part => {
        const [key, value] = part.split('=').map(decodeURIComponent);
        return { key: key || '', value: value || '' };
      });
    
    formParams.value = params.length ? params : [{ key: '', value: '' }];
  } catch (e) {
    console.error('解析表单参数失败', e);
    formParams.value = [{ key: '', value: '' }];
  }
};

const addHeaderParam = () => {
  headerParams.value.push({ key: '', value: '' });
};

const removeHeaderParam = (index) => {
  headerParams.value.splice(index, 1);
  // 至少保留一行
  if (headerParams.value.length === 0) {
    headerParams.value.push({ key: '', value: '' });
  }
  updateHeadersText();
};

const updateHeadersText = () => {
  // 将键值对转换为JSON对象
  const headers = {};
  headerParams.value.forEach(param => {
    if (param.key.trim()) {
      headers[param.key] = param.value;
    }
  });
  
  form.requestHeader = JSON.stringify(headers);
};

const parseHeadersToParams = () => {
  try {
    // 解析JSON对象为键值对数组
    const headers = JSON.parse(form.requestHeader || '{}');
    
    headerParams.value = Object.keys(headers).map(key => ({
      key,
      value: headers[key]
    }));
    
    // 如果没有header，添加一个空行
    if (headerParams.value.length === 0) {
      headerParams.value.push({ key: '', value: '' });
    }
  } catch (e) {
    console.error('解析请求头参数失败', e);
    headerParams.value = [{ key: '', value: '' }];
  }
};

const addCommonHeaders = () => {
  const commonHeaders = {
    'Content-Type': form.contentType,
    'Accept': 'application/json',
    'Authorization': 'Bearer '
  };
  
  // 更新请求头参数
  headerParams.value = Object.keys(commonHeaders).map(key => ({
    key,
    value: commonHeaders[key]
  }));
  
  // 更新文本
  updateHeadersText();
  
  ElMessage({
    message: '已添加常用请求头',
    type: 'success'
  });
};

const toggleHeaderCollapse = () => {
  isHeaderCollapsed.value = !isHeaderCollapsed.value;
};

const toggleBodyCollapse = () => {
  isBodyCollapsed.value = !isBodyCollapsed.value;
};

// 生命周期钩子
onMounted(async () => {
  let id = route.query.id;
  let data = { id };
  let res = await http.post("/schedulingTask/view", data);
  if (res.code === 200) {
    Object.assign(form, res.data);
    
    // 如果没有requestHeader字段或为空，初始化为空对象字符串
    if (!form.requestHeader) {
      form.requestHeader = '{}';
    }
    
    // 解析headers
    parseHeadersToParams();
  }
  
  // 初始化编辑器 (在DOM更新后)
  nextTick(() => {
    if (jsonTextarea.value) {
      setupJsonEditor();
    }
  });
});
</script>

<style scoped>
/* Postman亮色主题样式 */
.postman-style-editor {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  background-color: #ffffff;
  margin-bottom: 15px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.postman-tabs {
  display: flex;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.postman-tabs .tab {
  padding: 8px 15px;
  color: #606060;
  cursor: pointer;
  font-size: 12px;
  border-right: 1px solid #e8e8e8;
}

.postman-tabs .tab.active {
  background-color: #ffffff;
  color: #ff6c37;
  border-bottom: 2px solid #ff6c37;
  font-weight: 600;
}

.postman-editor-header {
  background-color: #fafafa;
  padding: 8px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.postman-editor-header .header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.postman-editor-header span {
  color: #505050;
  font-size: 12px;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  gap: 5px;
}

.postman-editor-body {
  display: flex;
  height: 240px;
  background-color: #ffffff;
}

.postman-status-bar {
  background-color: #f5f5f5;
  padding: 5px 10px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e0e0e0;
}

.status-message {
  font-size: 12px;
  color: #4caf50;
  display: flex;
  align-items: center;
}

.status-message.error {
  color: #f44336;
}

.status-message i {
  margin-right: 5px;
}

.line-numbers {
  flex: 0 0 40px;
  padding: 5px 0;
  height: 100%;
  background-color: #f5f5f5;
  color: #909090;
  text-align: right;
  overflow-y: hidden;
  user-select: none;
  border-right: 1px solid #e0e0e0;
}

.line-number {
  padding: 0 10px 0 0;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
}

.json-textarea {
  flex: 1;
  height: 100%;
  background-color: #ffffff;
  color: #333333;
  padding: 5px;
  border: none;
  outline: none;
  resize: none;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 13px;
  line-height: 20px;
  white-space: pre;
  overflow-x: auto;
}

/* 表单模式样式 */
.form-mode {
  padding: 0;
  background-color: #ffffff;
}

.key-value-table {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.kv-header {
  display: flex;
  background-color: #f5f5f5;
  color: #505050;
  font-size: 12px;
  padding: 8px;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
}

.kv-key, .kv-value {
  flex: 1;
  padding: 0 5px;
}

.kv-actions {
  width: 40px;
  text-align: center;
}

.kv-row {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  padding: 5px;
}

.kv-key-input, .kv-value-input {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  color: #333333;
  padding: 5px;
  margin: 0 5px;
  outline: none;
  border-radius: 3px;
}

.kv-key-input:focus, .kv-value-input:focus {
  border-color: #ff6c37;
}

.kv-add-row {
  padding: 10px;
  text-align: center;
}

.add-param-btn {
  background-color: transparent;
  border: 1px dashed #d0d0d0;
  color: #666666;
  padding: 5px 15px;
  cursor: pointer;
  border-radius: 3px;
}

.add-param-btn:hover {
  border-color: #ff6c37;
  color: #ff6c37;
}

/* 原有样式保留但不再使用 */
.json-editor {
  display: none;
}

.json-format-actions {
  display: none;
}

/* JSON预览样式 */
.json-preview {
  padding: 10px;
  overflow: auto;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
}

.json-preview pre {
  margin: 0;
  white-space: pre-wrap;
}

.preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #f44336;
  font-size: 14px;
}

.preview-error i {
  font-size: 32px;
  margin-bottom: 10px;
}

/* JSON语法高亮 - 亮色主题 */
.json-string {
  color: #a31515;
}

.json-number {
  color: #098658;
}

.json-boolean {
  color: #0000ff;
}

.json-null {
  color: #0000ff;
}

.json-key {
  color: #881391;
}

/* 表单行hover效果 */
.kv-row:hover {
  background-color: #f8f8f8;
}

/* 表单删除按钮 */
.kv-actions i {
  cursor: pointer;
  color: #a0a0a0;
  font-size: 14px;
}

.kv-actions i:hover {
  color: #f44336;
}

.collapsible {
  cursor: pointer;
}

.collapsible:hover {
  background-color: #f0f0f0;
}

.collapse-icon {
  margin-left: 8px;
  font-size: 14px;
  color: #909090;
  cursor: pointer;
}

.delete-icon {
  cursor: pointer;
  color: #a0a0a0;
  font-size: 14px;
}

.delete-icon:hover {
  color: #f44336;
}

/* 表单删除按钮 */
.kv-actions .el-icon {
  cursor: pointer;
  color: #a0a0a0;
  font-size: 14px;
}

.kv-actions .el-icon:hover {
  color: #f44336;
}

.collapsible {
  cursor: pointer;
}

.collapsible:hover {
  background-color: #f0f0f0;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 添加按钮中的图标垂直对齐 */
.add-param-btn .el-icon {
  vertical-align: middle;
  margin-right: 4px;
}

/* 状态消息中的图标垂直对齐 */
.status-message .el-icon {
  margin-right: 5px;
  vertical-align: middle;
}

/* 调试抽屉样式 */
.debug-container {
  padding: 20px;
}

.debug-header, .debug-section {
  margin-bottom: 20px;
}

.debug-section h3, .debug-header h3 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.debug-actions {
  margin: 20px 0;
}

.debug-response-status {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.debug-response-time {
  margin-left: 15px;
  color: #909399;
}

.debug-response-content {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}

:deep(.el-descriptions__label) {
  font-weight: bold;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
}
</style>
